<!-- 医院树组件 Create by liu 2021.6.25 -->
<template>
  <el-col>
    <el-input 
     placeholder="医院名称" 
     v-model="hospitalName" 
     clearable 
     size="mini" 
     style="width: 91%;"/>
  <div style="margin-top:5%;;border: 1px solid #dccdcd; margin-right:5%;">
    <el-tree
        :data="pickHospitalList"
        :props="defaultProps"
        :expand-on-click-node="false"
        node-key="value"
        :current-node-key="hospitalIds"
        :filter-node-method="filterNode"
        ref="tree"
        default-expand-all
        :loading="loadingIns"
        @node-click="handleNodeClick"
        style="overflow-y: auto; max-height: 755px;"
        highlight-current/>
 </div>
 </el-col>
</template>

<script>
import HospitalApi from '@/api/institution/hospital';
export default {
props: {
    id: {
        type:Number
    }
},
data() {
    return{
        defaultProps: {
            children: "children",
            label: "label"
        },
        pickHospitalList:[], // 机构列表 
        hospitalName:'',
        hospitalId:null,
        loadingIns: false,
        hospitalIds:null
    }
},
created(){
    this.getHospitalList();
    this.hospitalId = this.id
    this.hospitalIds = Number(localStorage.getItem("hospitalIds"))
},
watch:{
    // 根据机构名称筛选结构树
    hospitalName(val) {
        this.$refs.tree.filter(val);
    },
    id(val) {
        this.hospitalId = val
    },
},
methods:{
        // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
        this.hospitalId = data.value;
        // console.log(data.value)
        this.$emit('hospitalId', data.value)
    },
    getHospitalList() {
      // 获取医院列表
      let _this = this
      _this.loadingIns = true
        let cond = {
            hospitalType: 1
        }
        HospitalApi.getHospitalNameList(cond)
          .then(res => {
            setTimeout(() => {
              _this.loadingIns = false
              _this.pickHospitalList = res.data.map(item => {
                return {
                  value: item.hospitalId,
                  label: item.hospitalName
                }
              })
            }, 200)
          })
          .catch(error => {
            _this.pickHospitalList = []
            console.error(error)
          })
    },
},
}
</script>

<style>
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #75b3f1 !important;
  color: #f6f6f6 !important;
} 
</style>